class Sanke {
    // 设置表示蛇头的元素
    head: HTMLElement;
    // 蛇的身体，包括蛇头
    bodies: HTMLCollection;

    // 设置获取蛇的容器
    element: HTMLElement;
    constructor() {
        this.element = document.querySelector('.snake') as HTMLElement;

        this.head = document.querySelector('.snake>div') as HTMLElement;
        // 将类snake下面的所有div都获取到并存到bodies数组里面
        this.bodies = this.element.getElementsByTagName('div');
        // 这里获取的是nodeList，所以需要转换成数组，但是仍然会报错，我们暂时先不看
    }
    // 获取蛇头的位置
    getX() {
        return this.head.offsetLeft;
    }
    getY() {
        return this.head.offsetTop;
    }
    // 设置蛇头的位置
    setX(x: number) {
        //下面的代码十分重要，如果是竖直运动的，那么我们就不需要新设置蛇头的位置，也就是说，你的蛇不必刻意同时更新x与y坐标！！！
        // 在同一时间只可以更新一次
        if (x === this.getX()) {
            return;
        }

        // 蛇在水平方向移动时，按下左右按键不会发生移动，只有按下上下按键才会移动，所以这里我们只更新y坐标，不更新x坐标
        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === x) {
            // 此时在向右走，但是发生了掉头
            if (x > this.getX()) {
                x = this.getX() - 10;
            }
            else {
                x = this.getX() + 10;
            }
        }
        // 判断是否撞墙
        if (x < 0 || x > 540) {
            throw new Error('撞墙了');
        }
        this.bodymove();
        this.head.style.left = x + 'px';
        this.checkHeadBody();

        // console.log(`当前的x位置为${this.head.style.left}`);


    }
    setY(y: number) {
        //下面的代码十分重要，如果是水平运动的，那么我们就不需要新设置蛇头的位置
        if (y === this.getY()) {
            return;
        }

        // 蛇在竖直方向移动时，按下左上下按键不会发生移动，只有按左右下按键才会移动，所以这里我们只更新x坐标，不更新y坐标
        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === y) {
            if (y > this.getY()) {
                y = this.getY() - 10;
            }
            else {
                y = this.getY() + 10;
            }
        }
        // 判断是否撞墙
        if (y < 0 || y > 590) {
            throw new Error('撞墙了');
        }
        this.bodymove();
        this.head.style.top = y + 'px';
        this.checkHeadBody();
        // console.log(`当前的y位置为${this.head.style.top}`);

    }
    // 增加蛇的长度
    snakegrow() {
        // console.log(`身体数组的长度为${this.bodies.length}`);
        // 增加蛇的身体长度（nodeList没有push方法）
        // this.bodies.push(document.createElement('div'));
        this.element.insertAdjacentHTML('beforeend', '<div style=""></div>');
        // console.log(`身体数组的长度为${this.bodies.length}`);
        // 设置身体跟随蛇头移动
    }
    // 蛇的移动
    bodymove() {
        // console.log(`身体开始移动！！！`);

        for (let i = this.bodies.length - 1; i > 0; i--) {
            // 获取前面身体的位置
            let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
            // console.log(`X位置为` + X);

            let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;
            // console.log(`Y位置为` + Y);

            // 将前面身体的位置赋值给当前身体，实现身体的移动
            (this.bodies[i] as HTMLElement).style.left = X + 'px';
            (this.bodies[i] as HTMLElement).style.top = Y + 'px';
        }
    }
    // 检查蛇的头与身体是否发生重叠
    checkHeadBody() {
        // 获取所有身体的坐标同时与蛇头坐标对比
        for (let i = 1; i < this.bodies.length; i++) {
            // 获取身体的位置
            let X = (this.bodies[i] as HTMLElement).offsetLeft;
            let Y = (this.bodies[i] as HTMLElement).offsetTop;

            // 判断蛇头与身体是否发生重叠
            if (X == this.getX() && Y == this.getY()) {
                throw new Error('撞到自己了！');
            }
        }

    }

}
export default Sanke;